<template>
  <div class="about">
    <!-- 轮播版块 -->
    <div class="lunbo">
      <div class="lunbo-cen">
        <template>
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(item, index) in arr" :key="index">
              <img :src="item.avator" alt="" />
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
    </div>
    <div class="pp">
      <div class="pp1">
        <img
          src="//h2.appsimg.com/b.appsimg.com/upload/momin/2022/04/06/11/1649229465556_2340x240_90.jpg"
          alt=""
        />
      </div>
      <div class="pp2">
        <img
          src="http://h2.appsimg.com/b.appsimg.com/upload/momin/2022/04/06/60/1649229516739_756x500_90.jpg"
          alt=""
        />
        <img
          src="//h2.appsimg.com/b.appsimg.com/upload/momin/2022/04/06/7/1649229566306_756x500_90.jpg"
          alt=""
        />
        <img
          src="//h2.appsimg.com/b.appsimg.com/upload/momin/2022/04/06/77/1649229574082_756x500_90.jpg"
          alt=""
        />
      </div>
      <div class="pp3">
        <img
          src="//a.vpimg2.com/upload/flow/2018/08/17/154/15344789862278.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="fq">
      <div class="fqa">
        <div class="fq1">
        <ul>
          <div class="t1">
            <h2 class="fq-t">
            <span class="fq-t1">三折疯抢</span>·<span class="fq-t2"
              >超值让利</span
            >
          </h2>
          <p>精品疯抢中></p>
          </div>
          
          <li v-for="(item, index) in arr2" :key="index">
            <img :src="item.aimg" alt="" />
            <div class="cg">共{{ item.price }}款</div>
            <div class="price">
              <p class="p1">{{ item.at }}</p>
              <p class="p2">￥{{ item.price }}</p>
            </div>
          </li>
        </ul>
        <ul>
          <div class="t1">
            <h2 class="fq-t">
            <span class="fq-t1">三折疯抢</span>·<span class="fq-t2"
              >超值让利</span
            >
          </h2>
          <p>精品疯抢中></p>
          </div>
          
          <li v-for="(item, index) in arr2" :key="index">
            <img :src="item.aimg" alt="" />
            <div class="cg">共{{ item.price }}款</div>
            <div class="price">
              <p class="p1">{{ item.at }}</p>
              <p class="p2">￥{{ item.price }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="fq1">
        <ul>
          <div class="t1">
            <h2 class="fq-t">
            <span class="fq-t1">三折疯抢</span>·<span class="fq-t2"
              >超值让利</span
            >
          </h2>
          <p>精品疯抢中></p>
          </div>
          
          <li v-for="(item, index) in arr2" :key="index">
            <img :src="item.aimg" alt="" />
            <div class="cg">共{{ item.price }}款</div>
            <div class="price">
              <p class="p1">{{ item.at }}</p>
              <p class="p2">￥{{ item.price }}</p>
            </div>
          </li>
        </ul>
        <ul>
          <div class="t1">
            <h2 class="fq-t">
            <span class="fq-t1">三折疯抢</span>·<span class="fq-t2"
              >超值让利</span
            >
          </h2>
          <p>精品疯抢中></p>
          </div>
          <li v-for="(item, index) in arr2" :key="index">
            <img :src="item.aimg" alt="" />
            <div class="cg">共{{ item.price }}款</div>
            <div class="price">
              <p class="p1">{{ item.at }}</p>
              <p class="p2">￥{{ item.price }}</p>
            </div>
          </li>
        </ul>
      </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.about{
  width: 100%;
}
.lunbo {
  background: url(https://b.appsimg.com/upload/momin/2022/01/26/72/1643187867571.jpg) no-repeat;
  width: 1920px;
  height: 502px;
  box-sizing: border-box;
  padding: 100px;
  margin: 0 auto;
}
.lunbo-cen {
  width: 1150px;
  box-sizing: border-box;
  padding: 10px;
  margin: 0 auto;
}
.pp {
  width: 100%;
  /* border: 1px solid; */
}
.pp1 {
  margin: 0 auto;
  width: 1170px;
  height: 120px;
}
.pp1 img {
  width: 100%;
  height: 100%;
}
.pp2 {
  margin: 0 auto;
  width: 1170px;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid; */
}
.pp3 {
  width: 1170px;
  height: 70px;
  margin: 0 auto;
}
.fq{
  /* border: 1px solid; */
  margin: 0 auto;
  width: 1920px;
}
.fqa{
  /* border: 1px solid; */
  width: 80%;
  margin: 0 auto;
}
.fq1{
  display: flex;
  margin: 0 auto;
  width: 80%;
  justify-content: space-between;
  margin-top: 20px;
}
.fq ul {
  justify-content: space-evenly;
  width: 600px;
  height: 332px;
  border: 1px solid;
  padding: 24px 17px 0 22px;
  box-sizing: border-box;
}
.fq ul > li {
  display: inline-block;
  width: 172px;
  height: 172px;
  text-align: center;
  margin-top: 20px;
  margin-left: 7px;
  margin-right: 7px;
}
.price {
  display: flex;
  margin: 0 auto;
  width: 50%;
  /* border: 1px solid; */
  margin-top: 10px;
}
.p1 {
  background: rgb(240, 56, 130);
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  padding: 2px;
}

.fq-t1 {
  color: rgb(223, 108, 127);
}
.cg{
  color: rgb(173, 166, 166);
  font-size: 14px;
}
.t1{
  display: flex;
  justify-content: space-between;
}
.t1>p{
  font-size: 12px;
  margin-top: 10px;
}
</style>
<script>
import axios from "axios";
export default {
  name: "Nav",
  data() {
    return {
      arr: null,
      arr2: null,
    };
  },
  methods: {
    async getadd() {
      let { data } = await axios.get("/api/Nav");
      console.log(data);
      this.arr = data.data;

      console.log(this.arr);
    },
    async getTest() {
      let { data } = await axios.get("/api/Navtest");
      console.log(data);
      this.arr2 = data.data;

      console.log(this.arr2);
    },
  },
  created() {
    this.getadd();
    this.getTest();
  },
};
</script>
